<template>
    <fieldset>
        <legend>product:商品列表</legend>
        <ul>
            <li v-for="item in productData" :key="item.id">
                <b>
                    产品名称：{{item.title}}
                </b>
                -------
                <b>
                    价格:{{item.price}}
                </b>
                -------
                <b>
                    库存:{{item.inventory}}
                </b>
                <button :disabled="item.inventory===0" @click="addCart(item)">+加入购物车</button>
            </li>
        </ul>
    </fieldset>
</template>

<script setup>
    import { useProduct } from '../../store/product';
    import {storeToRefs} from "pinia"
    import {useCart} from "../../store/cart"

    let productStore = useProduct()
    let cartStore = useCart()

    // 解构取值
    let {productData} = storeToRefs(productStore)

    // 调用actions中的获取数据的请求方法
    productStore.fetch_data()

    // 添加到购物车
    let addCart = (item)=>{
        // 库存减少
        item.inventory--
        // 将点击的对象传递给cart模块的actions中
        cartStore.add_cart(item)

    }
</script>